<template>
  <div class="container">
    <!-- 上部分 -->
    <div class="top">
      <div class="top-item top1">
        <div class="card">
          <div class="card-title">设备总数</div>
          <div class="card-value">{{ deviceData.total || ' ' }}个</div>
        </div>
      </div>
      <div class="top-item top2">
        <div class="card">
          <div class="card-title">在线设备数</div>
          <div class="card-value">{{ deviceData.online || ' ' }}个</div>
        </div>
      </div>
      <div class="top-item top3">
        <div class="card">
          <div class="card-title">离线设备数</div>
          <div class="card-value">{{ deviceData.offline || ' ' }}个</div>
        </div>
      </div>
      <div class="top-item top4">
        <div class="card">
          <div class="card-title">工程总数</div>
          <div class="card-value">{{ engineerCount || ' ' }}个</div>
        </div>
      </div>
      <div class="top-item top5">
        <div class="card">
          <div class="card-title">工单总数</div>
          <div class="card-value">{{ workorderCount || ' ' }}个</div>
        </div>
      </div>
    </div>
    <!-- 下部分 -->
    <div class="bottom">
      <!-- 下左 -->
      <div class="bottom-left bottom1">
        <Map style="height: 85%;"></Map>
      </div>
      <!-- 下右 -->
      <div class="bottom-right">
        <div class="top-right">
          <div class="pie-chart">
            <C221></C221>
          </div>
          <div class="line-chart">
            <C222></C222>
          </div>
        </div>
        <div class="bottom-right-bar">
          <C223></C223>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Map from '../dashboard/components/Map.vue'
import C221 from '../dashboard/components/C221.vue'
import C222 from '../dashboard/components/C222.vue'
import C223 from '../dashboard/components/C223.vue'
import { get } from '@/utils/request';

export default {
  name: 'Layout',
  components: {
    Map,
    C221,
    C222,
    C223
  },
  data() {
    return {
      deviceData: {
        total: 0,
        online: 0,
        offline: 0
      },
      engineerCount: 0,
      workorderCount: 0
    };
  },
  created() {
    this.fetchDeviceData();
    this.fetchEngineerCount();
    this.fetchWorkorderCount();
  },
  methods: {
    //设备数量
    async fetchDeviceData() {
      try {
        const res = await get('/dashboard/queryDeviceOnlineNumber');
        if (res && res.data) {
          const onlineItem = res.data.find(item => item.type === '在线');
          const offlineItem = res.data.find(item => item.type === '离线');
          
          this.deviceData = {
            online: onlineItem ? onlineItem.value : 0,
            offline: offlineItem ? offlineItem.value : 0,
            total: (onlineItem ? onlineItem.value : 0) + (offlineItem ? offlineItem.value : 0)
          };
        }
      } catch (error) {
        console.error('获取设备数据失败:', error);
      }
    },
    //工程数量
    async fetchEngineerCount() {
      try {
        // 使用工程分页查询接口获取总数
        const res = await get('/engineer/pageQuery', {
          page: 1,
          pageSize: 10
        });
        console.log('工程总数响应:', res); // 调试用
        if (res && res.data) {
          // 根据接口文档，分页查询应返回total字段
          this.engineerCount = res.data.total || 0;
        }
      } catch (error) {
        console.error('获取工程总数失败:', error);
        this.$message.error('获取工程总数失败');
      }
    },
    //工单数量
    async fetchWorkorderCount() {
      try {
        // 使用工单分页查询接口获取总数
        const res = await get('/workorder/pageQuery', {
          page: 1,
          pageSize: 10
        });
        console.log('工单总数响应:', res); 
        if (res && res.data) {
          // 根据接口文档，分页查询应返回total字段
          this.workorderCount = res.data.total || 0;
        }
      } catch (error) {
        console.error('获取工单总数失败:', error);
        this.$message.error('获取工单总数失败');
      }
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
}

/* Top Section Styles */
.top {
  display: flex;
  height: 20%;
  width: 100%;
}

.top-item {
  flex: 1;
  margin: 5px;
  border: 1px solid #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  color: white; /* 统一文字颜色为白色 */
}

/* 黄色 - 设备总数 */
.top1 {
  background: linear-gradient(135deg, #ffd900c2, #ffa600d4);
}

/* 橙色 - 在线设备数 */
.top2 {
  background: linear-gradient(135deg, #ffa600d2, #ff8c00c8);
}

/* 浅红色 - 离线设备数 */
.top3 {
  background: linear-gradient(135deg, #ff6b6bd9, #ff6347cb);
}

/* 红色 - 工程总数 */
.top4 {
  background: linear-gradient(135deg, #ff4400cd, #dc143cc4);
}

/* 紫色 - 工单总数 */
.top5 {
  background: linear-gradient(135deg, #9470dbc9, #892be2be);
}

.card {
  text-align: center;
  padding: 20px;
  width: 100%;
}

.card-title {
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* 其余样式保持不变 */
.bottom {
  display: flex;
  height: 80%;
  width: 100%;
}

.bottom-left {
  flex: 1;
  margin: 5px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.bottom-right {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.top-right {
  display: flex;
  height: 50%;
}

.pie-chart,
.line-chart {
  flex: 1;
  margin: 5px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.bottom-right-bar {
  height: 50%;
  margin: 5px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>